<template>
  <div class="mirror-tab1">
    <p class="g-unit">收入: 万元, 用户数: 万户</p>
    <div class="tableBox">
      <el-table
        v-loading="tableLoading"
        :data="tableData"
        style="width: 100%"
        class="tableTh28"
        border
        max-height="450"
        stripe
        :span-method="arraySpanMethod"
        ref="table"
      >
        <el-table-column  v-if="subtype == '0'" label="本地网" prop="areaName" min-width="120"></el-table-column>

        <el-table-column  v-if="subtype == '1'" label="分类" prop="dataType" min-width="40"></el-table-column>
        <el-table-column  v-if="subtype == '1'" label="地市" prop="localName" min-width="90"></el-table-column>
        <el-table-column  v-if="subtype == '1'" label="县(市)分公司/分局" prop="areaName" min-width="130"></el-table-column>
        <el-table-column v-for="(item, i) in title" :key="i" :label="item.label"> 
            <el-table-column v-for="(it, index) in item.data" :key="index" :label="it.label">
               <el-table-column v-for="(data, indexSub) in it.origin" :min-width="data.width" :prop="data.val" :key="indexSub" :label="data.indexType3"></el-table-column>
            </el-table-column>
        </el-table-column>
        <!-- <el-table-column v-for="(item, i) in user" :key="'key1' + i" :label="item.label">
            <el-table-column v-for="(it, index) in item.origin" :min-width="140" :key="'key2' + index" :prop="it.val" :label="it.indexType3"></el-table-column>
        </el-table-column> -->
      </el-table>
    </div>
  </div>
</template>

<script>
import { mergeSpan } from "@/utils/mixin";
export default {
  name: "incomeMirror-tab1",
  props: ["rowData0", "rawTime"],
  data() {
    return {
      tableData: [],
      tableLoading: false,
      spanArr: null,
      year: "",
      month: "",
      time: {},
      title: [],
      user: [],
      subtype: '0',
    };
  },
  watch: {
    // tableData(val, oldVal) {
    //   console.log(1, val);
    //   console.log(2, oldVal);
    // },
    //  sheetList(val, oldVal) {
    //   this.tableData = val.dataList;
    //   this.colunmName = val.areaNames;
    //   this.rowspan();
    //   this.tableLoading=false;
    //   setTimeout(() => {
    //     this.$refs.table.doLayout();
    //   }, 500);
    // }
  },
  methods: {
    //table合并行
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 0 && this.subtype == '1') {
        return this.spanArr && this.spanArr[rowIndex][columnIndex];
      }
    },

    init() {
      let that = this,
        year = that.rawTime.year,
        month = that.rawTime.month,
        type = that.rawTime.type;

      that.year = +year;
      that.month = month;
      !that.rowData0.data.length ? that.tableData = [] : (that.rowData0.data.map(it => {
          it.dataList.map((item, i) => {
            it['val' + i] = item;
          })
      }), that.tableData = that.rowData0.data);
      
      that.subtype = type;
      that.tableLoading = !0;
      that.rowData0.titles.map((it, i) => {
          it['val'] = 'val' + i; 
          it['width'] = 130 || 30 * (it.indexType3.length)
      })
      var titleInfo = that.mergeTitles(that.rowData0.titles, 'indexType1');
      titleInfo.map(it => {
          // if(it.label != '客户经营') {
             it.origin.map((item, i, self) => {
              it.data = that.mergeTitles(self, 'indexType2');
            })
          // }
      })
      that.title = titleInfo
      // that.title = titleInfo.slice(0, titleInfo.length - 1);
      // that.user = titleInfo.slice(-1);
      
      if (type == '1' && that.rowData0 && that.rowData0.data.length) {
        that.spanArr = mergeSpan(that.rowData0.data, ["dataType"]);
      }
      
      that.$nextTick(() => {
        that.tableLoading = false;
        that.$refs.table.doLayout();
      });
    },
    mergeTitles(data, type) {
        let tempArr = [];
        let afterData = [];
        for (let i = 0; i < data.length; i++) {
            if (tempArr.indexOf(data[i][type]) === -1) {
            afterData.push({
                label: data[i][type],
                val: data[i].val,
                width: data[i].width,
                origin: [data[i]]
            });
            tempArr.push(data[i][type]);
        } else {
                for (let j = 0; j < afterData.length; j++) {
                    if (afterData[j].label == data[i][type]) {
                        afterData[j].origin.push(data[i]);
                        break;
                    }
                }
            }    
        }
        return afterData;
    }
  },
};
</script>

<style lang="scss">
.mirror-tab1 {
  .cell {
    text-align: center;
  }
}
</style>